<!--圆形柱状图-->

<template>
  <div class="w-h-full">
    <div v-if="shade" class="shade"></div>
    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'CircleBarChart',
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.1',
      configDataTemp: Object.assign({

        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          radiusAxis: {
            axisLabel: {
              show: true,
              margin: 10,
              color: "#fff",
              fontSize: 12
            }
          },
          series: [
            {
              barWidth: 18,
              roundCap: true,
              itemStyle: {
                color: {
                  startColor: '',
                  endColor: '',
                },
                shadowBlur: 0,
                shadowColor: "rgba(255, 255, 255, 0.8)"
              }
            },
            {
              showValue: true,
              style: {
                fill: "#fff",
                fontSize: 12,
              }
            }
          ]
        },

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '类目'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            'name': '南宁',
            'value': 10
          },
          {
            'name': '柳州',
            'value': 52
          },
          {
            'name': '桂林',
            'value': 200
          },
          {
            'name': '崇左',
            'value': 334
          },
          {
            'name': '北海',
            'value': 390
          }
        ],
        ds_useFilter: true,
        ds_useTimer: true,
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemClick', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('name', '', '类目'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('value', '', '值')
        ])
      ]))
    },
    data() {
      return {}
    },
    mounted() {

      this.init();

      this.setTimer(() => {
        this.init()
      })
    },
    methods: {

      init() {
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        });
      },

      launchInteractionStream (params) {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemClick', params.data)
      }

    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          tooltip: {
            show: true
          },
          polar: {},
          angleAxis: {
            show: false,
            // min: function (value) {
            //   return value.min + 50
            // },
            max: function (value) {
              return value.max * 1.3
            }
          },
          radiusAxis: {
            type: 'category',
            axisLabel: {
              show: this.component.compConfigData.chartOption.radiusAxis.axisLabel.show,
              interval: 0,
              margin: this.component.compConfigData.chartOption.radiusAxis.axisLabel.margin,
              color: this.component.compConfigData.chartOption.radiusAxis.axisLabel.color,
              fontSize: this.component.compConfigData.chartOption.radiusAxis.axisLabel.fontSize
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(17, 51, 68, 0.8)"
              }
            },
            data: []
          },
          series: [
            {
              type: 'bar',
              coordinateSystem: 'polar',
              barWidth: this.component.compConfigData.chartOption.series[0].barWidth,
              roundCap: this.component.compConfigData.chartOption.series[0].roundCap,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: this.component.compConfigData.chartOption.series[0].itemStyle.color.startColor
                        ? this.component.compConfigData.chartOption.series[0].itemStyle.color.startColor: this.currentEchartThemeColors[0]
                    },
                    {
                      offset: 1,
                      color: this.component.compConfigData.chartOption.series[0].itemStyle.color.endColor
                        ? this.component.compConfigData.chartOption.series[0].itemStyle.color.endColor : this.currentEchartThemeColors[7]
                    }
                  ]
                },
                barBorderRadius: 10,
                shadowBlur: this.component.compConfigData.chartOption.series[0].itemStyle.shadowBlur,
                shadowColor: this.component.compConfigData.chartOption.series[0].itemStyle.shadowColor,
              },
              data: []
            },
            {
              type: "custom",
              coordinateSystem: 'polar',
              renderItem: (params, api) => {
                let values = [api.value(0), api.value(1)];
                let coord = api.coord(values);
                if (this.component.compConfigData.chartOption.series[1].showValue) {
                  return {
                    type: 'text',
                    position: [12 * Math.sin(coord[3]), 12 * Math.cos(coord[3])],
                    rotation: coord[3] + Math.PI / 2,
                    origin: [coord[0], coord[1]],
                    style: {
                      text: api.value(1),
                      fill: this.component.compConfigData.chartOption.series[1].style.fill,
                      fontSize: this.component.compConfigData.chartOption.series[1].style.fontSize,
                      textAlign: "right",
                      textVerticalAlign: "middle",
                      x: coord[0],
                      y: coord[1]
                    }
                  }
                }
              },
              data: []
            }
          ]
        };

        let newResultObj = this.$PnUtil.deepClone(this.runCustomFilter(this.component.compConfigData.ds_resultObj));
        let newData = newResultObj.sort(function (a, b) {
          return a.value - b.value
        });
        option.series[0].data = option.series[1].data = newData;
        option.radiusAxis.data = newResultObj.map(function (item) {
          return item.name
        });

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    },
    watch: {}
  };

  export default _this
</script>

<style scoped>

</style>
